<template>
  <scroll
    ref="list"
    :data="items"
    :probeType="1"
    listenScroll
    pullup
    pulldown
    @scrollToEnd="scrollToEnd"
    @scroll="scroll"
  >
    <v-list two-line>
      <template v-for="(item, index) in items">
        <router-link to="/theme" :key="index">
          <v-divider
            v-if="item.divider"
            :key="index"
            :inset="item.inset"
          ></v-divider>

          <v-list-tile v-else :key="index" avatar>
            <v-list-tile-avatar>
              <img :src="item.avatar" />
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title v-html="item.title"></v-list-tile-title>
              <v-list-tile-sub-title
                v-html="item.subtitle"
              ></v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </router-link>
      </template>
    </v-list>
  </scroll>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import scroll from "@/components/scroll.vue";

interface Item {
  avatar: string;
  title: string;
  subtitle: string;
}
interface Divider {
  divider: boolean;
  inset: boolean;
}

@Component({})
export default class MessageList extends Vue {
  constructor() {
    super();
  }

  private items: Array<Item | Divider> = [
    // { header: "Today" },
    // { divider: true, inset: true },
    {
      avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      title: "Brunch this weekend?",
      subtitle:
        "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
    },
    { divider: true, inset: true },
    {
      avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
      title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
      subtitle:
        "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend."
    }
  ];

  created() {
    for (let i = 0; i < 5; i++) {
      this.items.push({ divider: true, inset: true });
      this.items.push({
        avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
        title: "Oui oui",
        subtitle:
          "<span class='text--primary'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?"
      });
    }
  }

  mounted() {}
}
</script>

<style lang="scss" scoped></style>
